
<html>

<body>
<input type="file" id="file-input"/>
<button onclick="start()">upload</button>
<script src="http://saifu-oss.oss-cn-shanghai.aliyuncs.com/axios.js"></script>
<script type="text/javascript">


    function start(){
        let file = document.getElementById("file-input").files.item(0)
        uploadFile(file)

    }



    var postOSSFile = (url, data) => {
        const options = {
            method: 'POST',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: data,
            url: url
        }

        return axios(options).then(xhr => {
            return xhr
        })
    }

    var getPolicy = (type, name) => {
        return axios.get(`/oss`)
    }

    var uploadFile = (
        file
    ) => {
        return getPolicy()
            .then(res => res.data)
            .then(policyData => {
                const url = policyData.host
                const data = new FormData()
                data.append('name', file.name)
                data.append('key', policyData.key)
                data.append('policy', policyData.policy)
                data.append('OSSAccessKeyId', policyData.accessId)
                data.append('success_action_status', '201')
                data.append('signature', policyData.signature)

                data.append('file', file)
                return postOSSFile(url, data)
            })
            .then(data => {
                const str = data.data
                let xmlDoc = new DOMParser().parseFromString(str, 'application/xml')
                if (!xmlDoc) return
                const url = xmlDoc.getElementsByTagName('Location')[0].innerHTML
                alert(url)
            })
    }
</script>

</body>

</html>
